<template>
  <div>
    <el-table :data="ipList">
      <el-table-column prop="id" label="Id"></el-table-column>
      <el-table-column prop="ip" label="IP"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template  slot-scope="scope">
          <span style="font-size: 14px;font-weight: bold; color: #39906c" v-if="scope.row.status === 1">正常</span>
          <span style="font-size: 14px;font-weight: bold; color: #ca0000" v-else>已禁用</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="openEditDialog(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑弹框 -->
    <el-dialog :visible="editDialogVisible" title="编辑用户" @close="closeEditDialog">
      <el-form :model="editFormData" label-width="80px">
        <el-form-item label="Id">
          <el-input v-model="editFormData.id" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="IP">
          <el-input v-model="editFormData.ip" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="editFormData.status"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeEditDialog">取消</el-button>
        <el-button type="primary" @click="saveEditData">保存</el-button>
      </div>
    </el-dialog>
    <!-- 分页组件 -->
    <el-pagination class="page"
                   background
                   layout="prev, pager, next"
                   :total="19"
                   @current-change="handlePageChange">
    </el-pagination>
  </div>
</template>

<script>
import {Loading} from "element-ui";

export default {
  name: "IP",
  data() {
    return {
      ipList: [],
      currentPage: 1,  // 当前页码
      pageSize: 5,  // 每页显示的条数
      totalItems: 19,  // 总条数
      editDialogVisible: false, // 编辑弹框是否显示
      editFormData: {}, // 编辑表单数据
    };
  },
  created() {
    let loading = Loading.service({fullscreen: true});
    this.getIpList(this.currentPage, this.pageSize)
    loading.close()
  },
  methods:{
    openEditDialog(row) {
      // 打开编辑弹框并回显数据
      this.editFormData = { ...row };

      this.editDialogVisible = true;
    },
    closeEditDialog() {
      // 关闭编辑弹框
      this.editDialogVisible = false;
    },
    saveEditData() {
      this.$store.dispatch('updateIpInfo',this.editFormData).then((res) => {
        location.reload()
        this.$message({
          message: res,
          type: 'success'
        });
      })

      console.log(this.editFormData)
      this.editDialogVisible = false;
    },
    handlePageChange(currentPage) {
      this.currentPage = currentPage; // 更新当前页码
      this.getIpList(currentPage, this.pageSize); // 加载对应页码的对话数据
    },
    getIpList(current, limit) {
      this.$store.dispatch('getIpList', {current, limit}).then((res) => {
        this.ipList = res.ipList.records;
        this.totalItems = res.total
      })
    },
  }
}
</script>

<style scoped>

</style>
